<template>
  <view class="achievement">
    <scroll-view id="achievementId" scroll-y>
      <div v-for="(item,index) in list" :key="index" class="bg-fff mg_l_20 mg_r_20 mg_t_20">
        <div class="row pd_t_50 pd_b_45 yh_bd_bottom">
          <div class="flex-1 pd_l_30">
            <div class="font-28 font-b col-333 pd_b_20">{{item.schoolName}}  {{item.className}}</div>
            <div class="font-26 col-666">共{{item.grades.length}}个学科</div>
          </div>
          <div class="pd_r_30 more-icon row" style="justify-content: space-between;width: 150upx">
            <u-icon name="edit-pen-fill" size="42" color="#1f476d" @click="openWindow('/pages/user/add_achievement', item)"></u-icon>
            <u-icon name="close-circle-fill" size="42" color="#999" @click="deleteData(item.id)"></u-icon>
          </div>
        </div>
        <div class="row cont-center pd_t_30 pd_b_30 pd_l_30 pd_r_30"  @click="showAll(index)">
          <div class="flex-1 font-24 col-333">{{index == showIndex ? '收起' : '查看成绩'}}</div>
          <div class="flex-1"></div>
          <div class="up-icon">
            <u-icon :name="index == showIndex ? 'arrow-up' : 'arrow-down'" color="#999" size="28"></u-icon>
          </div>
        </div>
        <div v-if="index == showIndex">
          <div v-for="(items,indexs) in item.grades" :key="indexs" style="justify-content: space-between" class="row cont-center cont-rl col-333 font-26 font-400 pd_b_30">
            <div class="pd_l_30">{{items.subject}}</div>
            <div class="pd_r_30">{{items.score}}</div>
          </div>
        </div>
      </div>
    </scroll-view>
    <div class="bg-fff btn-container pd_t_19 pd_b_20 row">
      <view style="width: 40%">
      <u-button type="primary" :custom-style="customStyle" shape="circle"  @click="openWindow('/pages/user/add_achievement')">添加成绩</u-button>
      </view>
      <view style="width: 40%">
      <u-button type="primary" :custom-style="customStyle" shape="circle" @click="openWindow('/pages/user/echart')">分析</u-button>
      </view>
    </div>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {TOAST} from "../../util/util";
  import {THEME} from "../mixins/config";

  export default {
    name: "",
    data() {
      return {
        customStyle: {
          background: THEME.btn_active_bg_color,
          padding: '0 30rpx'
        },
        show: false,
        list: [],
        showIndex: '-1',
        showIndexList: '-1',
        showList: false,
      }
    },
    onShow() {
      this.getSchoolGrades()
    },
    methods: {
      getSchoolGrades() {
        var that_ = this;
        that_.list = [];
        request({
          url: '/app/userCenter/getSchoolGrades'
        }).then(ret => {
          if (ret.data.length > 0) {
            that_.list = ret.data;
          }
        })
      },

      deleteData(id) {
        var that_ = this;
        request({
          url: '/app/userCenter/delSchoolGrade',
          data: {
            id: id
          }
        }).then(ret => {
          that_.getSchoolGrades();
          TOAST('删除成功');
        })
      },

      openWindow(path, list) {
        if (list) {
          setTimeout(() => {
            uni.$emit('achievement_info', {
              list: list
            })
          }, 300)
          this.$u.route({
            url: path
          })
        } else {
        	this.$u.route({
            url: path
          })
        }
      },
      showAll (i) {
        if(i == this.showIndex) {
          this.showIndex = -1
        } else {
          this.showIndex = i;
          this.show = true;
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .achievement {
    background: #f7f7f7;
    padding-bottom: 140upx;
    height: 100%;
    display: flex;
    flex-direction: column;
    #achievementId {
      height: 100%;
    }
    .btn-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding-left: 30upx;
      padding-right: 30upx;
      box-shadow: 1px 8px 16px 0px rgba(0, 0, 0, 0.47);
      justify-content: space-around;
    }
  }
</style>
